<template>
  <div class="user-table" v-if="userVisible">
    <div class="user-options">
      <el-button class="user-options-add" type="success" @click="addUserBtn" v-permission="'user:add'">添加用户
      </el-button>
      <div>
        <el-input class="user-options-input" v-model="username" placeholder="请输入名称检索"></el-input>
        <el-button class="user-options-search" type="primary" @click="searchUserBtn">查询</el-button>
      </div>
    </div>
    <el-table max-height="550"
              :data="tableData.filter(data => !username || data.UserName.toLowerCase().includes(username.toLowerCase()))"
              border style="width: 100%">
      <el-table-column prop="UserName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="UserType" label="角色">
        <template slot-scope="scope">
          <label v-if="scope.row.UserType===1">OPN操作员</label>
          <label v-if="scope.row.UserType===2">OPN技师</label>
          <label v-if="scope.row.UserType===3">ME</label>
          <label v-if="scope.row.UserType===4">PE</label>
          <label v-if="scope.row.UserType===5">管理员</label>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" v-permission="'user:delete'"
                     @click="userDeleteBtn(scope.$index, scope.row)">删除
          </el-button>
          <el-button size="mini" type="warning" v-permission="'user:assign'"
                     @click="authorityAssignment(scope.$index, scope.row)">权限分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-user-dialog :show="showEditUserDialog" @close="changeEditUserDialog"></edit-user-dialog>
    <role-manage-dialog :user-id="userId" :show="showRoleManageDialog"
                        @close="changeAuthDialog"></role-manage-dialog>
  </div>
</template>
<script>

module.exports = {
  name: 'user',
  components: {
    EditUserDialog: httpVueLoader('./EditUserDialog.vue'),
    RoleManageDialog: httpVueLoader('./RoleManageDialog.vue')
  },
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show (v) {
      this.userVisible = v;
      if (v) {
        this.searchUserBtn();
      }
    }
  },
  data () {
    return {
      showEditUserDialog: false,
      showRoleManageDialog: false,
      userVisible: false,
      username: '',
      tableData: [],
      userId: 0
    }
  },
  methods: {
    handleClose (done) {
      this.userVisible = false;
      this.$emit('close');
      done();
    },
    /**
     * 查询用户事件
     */
    searchUserBtn () {
      GetUserListApi().then(r => {
        this.tableData = r.Data
      });
    },

    /**
     * 权限分配
     * @param index
     * @param row
     */
    authorityAssignment (index, row) {
      this.showRoleManageDialog = true;
      this.userId = row.Id;
    },
    /**
     *
     * 删除用户事件
     * @param index
     * @param row
     */
    userDeleteBtn (index, row) {
      this.$confirm(`确定删除【${row.UserName}】用户, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteUserApi(row.Id).then(r => {
          this.$message({
            type: 'success',
            message: r.Message
          });
          this.searchUserBtn();
        });
      });
    },

    /**
     * 添加用户事件
     */
    addUserBtn () {
      this.changeEditUserDialog();
    },
    changeAuthDialog (v) {
      this.showRoleManageDialog = false;
    },
    changeEditUserDialog (v) {
      this.showEditUserDialog = !this.showEditUserDialog;
      if (v) {
        this.searchUserBtn();
      }
    }
  }
}
</script>
<style scoped>
.user-table {
  padding: 30px;

  .user-options {
    display: flex;
    padding: 10px;

    > div {
      flex: 1;
      display: flex;
      justify-content: flex-end;

    }

    .user-options-input {
      width: 300px;
      margin-right: 10px;
    }
  }
}

</style>
